<template>
	<view class="content">		
		<scroll-view scroll-y class="menu-c">
			<view class="items-c" v-for="(item , index) in CategoryList" :key="index" @click="receive(index)">
				{{item.showName}}
				<view class="bot-set " :class="index==menusIndex? 'animate__animated animate__backInLeft':'animate__animated animate__backOutLeft'">
				</view>
				

			</view>
		</scroll-view>
		<!-- <qy-menus :menusIndex="menusIndex" @receive="receive"  :CategoryList = "CategoryList"></qy-menus> -->
		<!-- 普通菜品 -->
			<commodityView :menuList='menuList' v-if="typeCurrent.isSoup !== 1"/>
			<!-- 锅底 -->
			<primers v-else :menuList='menuList' :primetrs="primetrs" />
		<!-- <right-content v-else :menusIndex="menusIndex" :menuList="menuList" :primetrs="primetrs"/> -->

		
	</view>
</template>

<script>
	import qyMenus from '@/components/menu.vue'
	import primers from './primers.vue'
	import commodityView from './commodityView.vue'
	export default {
		name: "qy-home-content",
		components: {
			qyMenus,
			commodityView,
			primers
		},

		props: {
			menuList: Array,
			primetrs: Object,
			CategoryList: Array, //菜品
			menusIndex: Number,
			typeCurrent: Object
		},
		data() {
			return {
				curIndex: 0
			};
		},
		methods: {
			receive(e) {
				this.$emit("menusIndexFun", e)
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		display: flex;
		flex: 1;
		flex-direction: row;
		background-color: $qy-bg-home-color;
		padding-top: 56px;
		box-sizing: border-box;
		overflow: hidden;
	}

	.menu-c {
		width: 124px;
		display: flex;
		// height: 92.7vh;
		// background: red;
		background: $qy-bg-nav-color;
		display: flex;
		flex-direction: column;
		padding-left: 20px;
		box-sizing: border-box;
		z-index: 9;

		.items-c {
			position: relative;
			color: $uni-text-color;
			width: 100%;
			text-align: center;
			padding: 16px 0;
			box-sizing: border-box;

		}

		// .itemNo {
		// 	position: relative;
		// 	color: $uni-text-color-inverse;
		// 	width: 100%;
		// 	text-align: center;
		// 	padding: 16px 0;

		// }

		.bot-set {
			position: absolute;
			height: 100%;
			width: 100%;
			top: 0;
			left: 0;
			border-radius: 10px 0 0 10px;
			background: linear-gradient(90deg, #FE8E04 0%, rgba(254, 142, 4, 0.61) 60%, rgba(254, 142, 4, 0) 100%);
		}


	}
</style>